<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
            <el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
				<section style="flex: 1; height: inherit;overflow-y: auto;">
                    <el-form ref="ruleFormRef" :model="state.voucherData" :rules="rules" label-width="160px">
                        <el-form-item label="代金券类型：" prop="spuType">
                            <section style="display: flex; flex-direction: column;">
                                <section class="flex">
                                    <div class="width130 flex-column-center typeBox" :dabled="state.status == 'look'"
                                        :class="state.voucherData.couponBaseType == 0 ? 'typeBoxSelected':'' " @click="changeType(0)">
                                        <span class="font16"> 满减券 </span>
                                        <span class="font14 "> 满N元减N元 </span>
                                        <div v-if="state.voucherData.couponBaseType == 0" class="virtual_san"></div>
                                        <div v-if="state.voucherData.couponBaseType == 0" class="virtual_dui">✓</div>
                                    </div>
                                    <div class="width130 flex-column-center typeBox" :dabled="state.status == 'look'"
                                        :class="state.voucherData.couponBaseType == 1 ? 'typeBoxSelected':'' " @click="changeType(1)">
                                        <span class="font16"> 折扣券 </span>
                                        <span class="font14 "> 满N元打N折 </span>
                                        <div v-if="state.voucherData.couponBaseType == 1" class="virtual_san"></div>
                                        <div v-if="state.voucherData.couponBaseType == 1" class="virtual_dui">✓</div>
                                    </div>
                                </section>
                                <explainBox msg="代金券类型在代金券保存后无法修改，请谨慎选择" color="var(--el-color-primary-light-2)" />
                            </section>
                        </el-form-item>
                        <el-form-item label="优惠券名称：" prop="couponName">
                            <el-input :disabled="state.status == 'look'" class="width450" v-model="state.voucherData.couponName" placeholder="请输入优惠券名称" 
                                maxlength="11" show-word-limit />
                        </el-form-item>
                        <el-form-item label="使用门槛：">
                            <section style="display:block;">
                                <el-radio-group :disabled="state.status == 'look'" v-model="state.voucherData.couponMinPriceType">
                                    <el-radio :label=0>无门槛</el-radio>
                                    <el-radio :label=1>有门槛</el-radio>
                                </el-radio-group>
                                <section v-if="state.voucherData.couponMinPriceType == 1">
                                    <el-input class="width450" :disabled="state.status == 'look'" v-model="state.voucherData.couponMinPrice" placeholder="填写优惠券的最低消费金额" >
                                        <template #append>元</template>
                                    </el-input>
                                </section>
                                <explainBox v-if="state.voucherData.couponMinPriceType == 1" msg="优惠券最低消费金额；" width='450px'
                                    color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://vipuser3.eweishop.com/static/dist/shop/image/goods/thumb-video-ratio.png"/>
                            </section>
                        </el-form-item>
                        <el-form-item :label="state.voucherData.couponBaseType == 0 ? '优惠券面值：': '优惠券折扣：'" prop="couponValue">
                            <el-input :disabled="state.status == 'look'" v-if="state.voucherData.couponBaseType == 0" class="width450" v-model="state.voucherData.couponValue" 
                                placeholder="请输入优惠券面值" >
                                <template #append>元</template>
                            </el-input>
                            <el-input :disabled="state.status == 'look'" v-if="state.voucherData.couponBaseType == 1" class="width450" v-model="state.voucherData.couponValue" 
                                placeholder="请输入优惠券折扣" >
                                <template #append>折</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="领取方式：" prop="couponType">
                            <section style="display:block;">
                                <el-radio-group :disabled="state.status == 'look'" v-model="state.voucherData.couponType">
                                    <el-radio :label=1>手动领取</el-radio>
                                    <el-radio :label=2>新人券</el-radio>
                                    <el-radio :label=3>赠送券</el-radio>
                                </el-radio-group>
                                <section>
                                <explainBox msg="手动领取:用户需要在移动端得领券中心领取优惠券;后台发放:后台发放用于后台发放指定用户使用，移动端不能领取；" width='450px'
                                    color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://vipuser3.eweishop.com/static/dist/shop/image/goods/thumb-video-ratio.png"/>
                                </section>
                            </section>
                        </el-form-item>
                        <el-form-item label="使用类型：" prop="couponUseType">
                            <section style="display:block;">
                                <el-radio-group :disabled="state.status == 'look'" v-model="state.voucherData.couponUseType">
                                    <el-radio :label=1>通用券</el-radio>
                                    <el-radio :label=2>商品券</el-radio>
                                    <el-radio :label=3>品类券</el-radio>
                                    <el-radio :label=4>分类券</el-radio>
                                    <el-radio :label=5>品牌券</el-radio>
                                </el-radio-group>
                                <section>
                                    <section v-if="state.voucherData.couponUseType == 2" class="px10 mb10 borderRadius5" 
                                        style="background:var(--el-color-primary-light-9);width: 1080px;">
                                        <section>
                                            <el-radio-group :disabled="state.status == 'look'" v-model="state.voucherData.couponProductIsUse">
                                                <el-radio :label=1>指定商品可用</el-radio>
                                                <el-radio :label=0>指定商品不可用</el-radio>
                                            </el-radio-group>
                                        </section>
                                        <el-tag v-if="state.status != 'look'" color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addGoodsFile()" class="mb15">
                                            添加商品
                                        </el-tag>
                                        <section v-if="state.voucherData.goodsList.length > 0" >
                                            <el-table :data="state.voucherData.goodsList" border>
                                                <el-table-column label="编码" width="90" align="center">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.data.skuId }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="图片" align="center">
                                                    <template #default="scope">
                                                        <div style="display: flex;justify-content:center;align-items: center;">
                                                            <el-image style="width:32px;height: 32px;" :src="scope.row.data.imgUrl" fit="cover" />
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="商品名称"  align="center">
                                                    <template #default="scope">
                                                        <span> {{ scope.row.data.spuName }} </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="类型"  align="center">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.data.skuList[0].skuTypeName }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="零售价"  align="center">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.data.skuList[0].lowPrice }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="title" label="操作" width="120" show-overflow-tooltip>
                                                    <template #default="scope">
                                                        <el-button :disabled="state.status == 'look'" text type="primary" @click="delItem(scope.$index)">
                                                            移除
                                                        </el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </section>
                                    </section>
                                    <section v-if="state.voucherData.couponUseType == 3" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);width: min-content;">
                                        <el-cascader :disabled="state.status == 'look'" v-model="state.voucherData.normalIds" class="width450" placeholder="请选择商品类型"
                                            :options="state.productTypeList" :props="{  label: 'dictName', value: 'dictValue', children: 'children',
                                            multiple: true}"></el-cascader>
                                    </section>
                                    <section v-if="state.voucherData.couponUseType == 4" class="px10 mb10 borderRadius5" 
                                        style="background:var(--el-color-primary-light-9);display: flex;flex-direction: column;width: min-content;">
                                        <el-cascader :disabled="state.status == 'look'" v-model="state.voucherData.storeCategoryIds" class="width450 mb10" placeholder="请选择门店商品分类"
                                            :options="state.storeCategoryList" :props="{  label: 'text', value: 'id', children: 'children',
                                            multiple: true}" ></el-cascader>
                                        <el-cascader :disabled="state.status == 'look'" v-model="state.voucherData.shopCategoryIds" class="width450" placeholder="请选择商城商品分类"
                                            :options="state.shopCategoryList" :props="{  label: 'text', value: 'id', children: 'children',
                                            multiple: true}"></el-cascader>
                                    </section>
                                    <section v-if="state.voucherData.couponUseType == 5" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);width: min-content;">
                                        <el-cascader :disabled="state.status == 'look'" v-model="state.voucherData.normalIds" class="width450" placeholder="请选择商品品牌"
                                            :options="state.productBrandList" :props="{  label: 'brandName', value: 'brandId', children: 'children',
                                            multiple: true}"></el-cascader>
                                    </section>
                                </section>
                            </section>
                        </el-form-item>
                        <el-form-item label="领取时间：">
                            <section style="display:block;">
                                <el-radio-group :disabled="state.status == 'look'" v-model="state.voucherData.couponIsForever">
                                    <el-radio :label=0>不限制</el-radio>
                                    <el-radio :label=1>固定时间段</el-radio>
                                </el-radio-group>
                                <section>
                                    <el-date-picker :disabled="state.status == 'look'" v-if="state.voucherData.couponIsForever == 1" class="width450" 
                                        type="datetimerange" v-model="state.voucherData.couponIsForeverTimeDate"  unlink-panels 
                                        range-separator="-"  start-placeholder="开始日期" end-placeholder="结束日期" />
                                </section>
                                <explainBox v-if="state.voucherData.couponIsForever == 0" msg="不限制时间段可领取" width='450px'
                                    color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://vipuser3.eweishop.com/static/dist/shop/image/goods/thumb-video-ratio.png"/>
                                <explainBox v-if="state.voucherData.couponIsForever == 1" msg="限制在该时段下才可领取优惠券" width='450px'
                                    color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://vipuser3.eweishop.com/static/dist/shop/image/goods/thumb-video-ratio.png"/>
                            </section>
                        </el-form-item>
                        <el-form-item label="使用时间限制：">
                            <section style="display:block;">
                                <el-radio-group :disabled="state.status == 'look'" v-model="state.voucherData.couponIsFixedTime">
                                    <el-radio :label=0>固定天数</el-radio>
                                    <el-radio :label=1>固定时间段</el-radio>
                                    <el-radio :label=2>不限制</el-radio>
                                </el-radio-group>
                                <section>
                                    <el-input :disabled="state.status == 'look'" v-if="state.voucherData.couponIsFixedTime == 0" class="width450" v-model="state.voucherData.couponUseDay" placeholder="填写" />
                                    <el-date-picker :disabled="state.status == 'look'" v-if="state.voucherData.couponIsFixedTime == 1" class="width450" type="datetimerange" 
                                        v-model="state.voucherData.couponIsFixedTimeDate" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
                                </section>
                                <explainBox v-if="state.voucherData.couponIsFixedTime == 0" msg="领取后多少天内有效" width='450px'
                                    color="var(--el-color-primary-light-2)" />
                                <explainBox v-if="state.voucherData.couponIsFixedTime == 1" msg="可使用时间范围" width='450px'
                                    color="var(--el-color-primary-light-2)"  />
                            </section>
                        </el-form-item>
                        <el-form-item label="优惠使用限制：" prop="couponLimitType">
                            <section style="display:block;">
                                <el-radio-group :disabled="state.status == 'look'" v-model="state.voucherData.couponLimitType">
                                    <el-radio :label=0>不限制</el-radio>
                                    <el-radio :label=1>不可与会员折扣同时使用</el-radio>
                                </el-radio-group>
                            </section>
                        </el-form-item>
                        <el-form-item label="是否限量：" prop="couponIsLimited">
                            <section style="display:block;">
                                <el-radio-group :disabled="state.status == 'look'" v-model="state.voucherData.couponIsLimited">
                                    <el-radio :label=0>不限量</el-radio>
                                    <el-radio :label=1>限量</el-radio>
                                </el-radio-group>
                                <section v-if="state.voucherData.couponIsLimited == 1" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
                                    <el-input class="width450" v-model="state.voucherData.couponTotal" placeholder="优惠券发放数量" />
                                </section>
                                <explainBox v-if="state.voucherData.couponIsLimited == 1" msg="填写优惠券的发布数量" width='450px'
                                    color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://vipuser3.eweishop.com/static/dist/shop/image/goods/thumb-video-ratio.png"/>
                            </section>
                        </el-form-item>
                        <el-form-item label="使用规则：">
                            <el-input :disabled="state.status == 'look'" style="width: 420px" v-model="state.voucherData.couponDesc"
                                :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                                placeholder="使用规则说明"
                            />
                        </el-form-item>
                        <el-form-item label="是否开启：">
                            <el-switch :disabled="state.status == 'look'" v-model="state.voucherData.couponStatus" :active-value=1 :inactive-value=0 />
                        </el-form-item>
                    </el-form>
                </section>
                <section v-if="state.status != 'look'" style="text-align: center; margin:10px 0;">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </section>
            </el-card>
            <AddInformation ref="addInformationRef" @selectFun="selectFun" />
            <useTypeDialog ref="useTypeDialogRef" @useTypeListFun="useTypeListFun" />
            <goodSelectDialog ref="goodSelectDialogRef" @goodsSubmitFun="goodsSubmitFun" />
        </div>
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import { couponAdd,couponInfo } from "/@/api/marketing";
import { configData } from '/@/api/common';
import { brandList, productCategoryList } from "/@/api/commodity";
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute ,useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const useTypeDialog = defineAsyncComponent(() => import('/@/components/createGoods/useTypeDialog.vue'))
// 引入组件
const goodSelectDialog = defineAsyncComponent(() => import('/@/components/dialog/goodSelect.vue'));
// 定义变量内容
const goodSelectDialogRef = ref();
const useTypeDialogRef = ref()
const emit = defineEmits(['stepChange'])
const ruleFormRef = ref<FormInstance>()
const addInformationRef = ref()
const state = reactive({
    status:'edit',
	// 添加图片类型
	addFileType: '',
	// 商品类型列表
	brandList: [] as Array<any>,
	// 门店商品分类
	storeCategoryList: [] as Array<any>,
	// 商城商品分类
	shopCategoryList: [] as Array<any>,
	// 运费模板列表
	productBrandList: [] as Array<any>,
    productTypeList: [] as Array<any>,
    voucherData:{
        skuId:null,
        couponBaseType:0,
        couponName:'',//优惠券名称
        couponMinPriceType:0,//是否存在使用门槛
        couponMinPrice:null, // 最低消费金额
        couponValue:null, // 金额或者折扣值
        couponType: 1,// 领取方式 1手动领取 2新人 3 赠送
        couponUseType: 1, // 使用类型
        goodsList:[],
        couponProductIsUse:1 , // 0 不可用 1 可用
        productIds:[],
        normalIds:[],
        shopCategoryIds:[],
        storeCategoryIds:[],
        couponIsForever: 0, // 领取时间限制
        couponIsForeverTimeDate: [], // 领取时间段
        couponIsFixedTime: 0, // 是否固定使用时间
        couponUseDay:null, // 固定可使用天数
        couponIsFixedTimeDate: [], // 使用时间段
        couponLimitType:0, // 优惠使用限制
        couponIsLimited: 0, // 优惠券是否限量发放
        couponTotal:null, // 优惠券发放数量
        couponDesc: '', // 使用规则
        couponStatus: 0, // 状态 0 关闭 1 开启
    }
})

const rules = reactive<FormRules<any>>({
	couponBaseType: [{ required: true, message: '请选择优惠券类型', trigger: 'change' }],
	name: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
	money: [{ required: true, message: '请选择优惠券面值', trigger: 'blur' }],
	type: [{ required: true, message: '请选择优惠券领取方式', trigger: 'change' }],
	useType: [{ required: true, message: '请选择优惠券使用类型', trigger: 'change' }],
})

// 商品类型修改 不同类型切换时会清空Sku数据或者设置sku 为单规格
const changeType = (val: any) => {
	if(state.status == 'look'){
		return 
	}
	if(val != state.voucherData.couponBaseType){
        state.voucherData.couponBaseType = val;
        state.voucherData.couponValue = null;
	}
}

// 使用类型选择弹窗
const addGoodsFile = () => {
    goodSelectDialogRef.value.openDialog(state.voucherData.goodsList);
}

// 选中关联商品
const goodsSubmitFun = (list: any) =>{
	state.voucherData.goodsList = list.map((item:any) => {return {data:item}});
}

// 页面加载时
onMounted(async ()  => {
    getChainList();
    getBrandList();
    getStoreCategoryList();
    getShopCategoryList();
    state.status = route.query.status;
    if (route.query.status == 'edit' || route.query.status == 'look') {
        const { results } = await couponInfo(route.query.id);
        state.voucherData.couponBaseType = results.coupon.couponBaseType;
        state.voucherData.couponName = results.coupon.couponName;//优惠券名称
        state.voucherData.couponMinPriceType = results.coupon.couponMinPrice > 0 ? 1 : 0;//是否存在使用门槛
        state.voucherData.couponMinPrice = results.coupon.couponMinPrice; // 最低消费金额
        state.voucherData.couponValue = results.coupon.couponValue; // 金额或者折扣值
        state.voucherData.couponType = results.coupon.couponType;// 领取方式 1手动领取 2新人 3 赠送
        state.voucherData.couponUseType = results.coupon.couponUseType; // 使用类型
        state.voucherData.goodsList = results.product.map((item:any) => {return {data:item}}); 
        state.voucherData.couponProductIsUse = results.coupon.couponProductIsUse;  // 0 不可用 1 可用
        state.voucherData.productIds = results.coupon.productIds; 
        state.voucherData.normalIds = results.coupon.normalIds;
        state.voucherData.shopCategoryIds = results.coupon.shopCategoryIds;
        state.voucherData.storeCategoryIds = results.coupon.storeCategoryIds;
        state.voucherData.couponIsForever = results.coupon.couponIsForever; // 领取时间限制
        state.voucherData.couponIsForeverTimeDate = results.coupon.couponIsForeverTime; // 领取时间段
        state.voucherData.couponIsFixedTime = results.coupon.couponIsFixedTime;  // 是否固定使用时间
        state.voucherData.couponUseDay = results.coupon.couponUseDay;  // 固定可使用天数
        state.voucherData.couponLimitType = results.coupon.couponLimitType; // 优惠使用限制
        state.voucherData.couponIsLimited = results.coupon.couponIsLimited; // 优惠券是否限量发放
        state.voucherData.couponTotal = results.coupon.couponTotal; // 优惠券发放数量
        state.voucherData.couponDesc = results.coupon.couponDesc; // 使用规则
        state.voucherData.couponStatus = results.coupon.couponStatus; // 状态 0 关闭 1 开启
        if(results.coupon.couponIsForever == 1){
            state.voucherData.couponIsForeverTimeDate = [
                results.coupon.couponReceiveStartTime, results.coupon.couponReceiveEndTime
            ]
        }
        if(results.coupon.couponIsFixedTime == 1){ 
            state.voucherData.couponIsFixedTimeDate = [
                results.coupon.couponUseStartTime, results.coupon.couponUseEndTime
            ]; // 使用时间段
        }
    }
});

// 获取商品类型列表
const getChainList = async () => {
	const { results } = await configData({ dictType: '' });
	state.productTypeList = results.spuType;
	state.productTypeList.forEach((Obj: any) => {
		if (Obj.children != null && Obj.children.length > 0) {
			Obj.disabled = false
		}
	})
}

// 品牌列表获取
const getBrandList = async () => {
	const { results } = await brandList({ mode: null });
	state.productBrandList = results.records;
    state.productTypeList.forEach((Obj: any) => {
		if (Obj.children != null && Obj.children.length > 0) {
			Obj.disabled = false
		}
	})
}

// 门店商品分类获取
const getStoreCategoryList = async () => {
	const { results } = await productCategoryList({ platformType: 0 });
	state.storeCategoryList = results;
    state.storeCategoryList.forEach((Obj: any) => {
		if (Obj.children != null && Obj.children.length > 0) {
			Obj.disabled = false
		}
	})
}

// 商城商品分类获取
const getShopCategoryList = async () => {
	const { results } = await productCategoryList({ platformType: 1 });
	state.shopCategoryList = results;
    state.shopCategoryList.forEach((Obj: any) => {
		if (Obj.children != null && Obj.children.length > 0) {
			Obj.disabled = false
		}
	})
}

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate( async (valid, fields) => {
		if (valid) {
			let params = {
                skuId: state.voucherData.skuId,
                couponBaseType: state.voucherData.couponBaseType,
                couponName:state.voucherData.couponName,//优惠券名称
                couponMinPrice: state.voucherData.couponMinPriceType == 0 ? 0 : state.voucherData.couponMinPrice, // 最低消费金额
                couponValue:Number(state.voucherData.couponValue), // 金额或者折扣值
                couponType: state.voucherData.couponType,// 领取方式 1手动领取 2新人 3 赠送
                couponUseType: state.voucherData.couponUseType, // 使用类型
                productIds: state.voucherData.couponUseType == 2 ? state.voucherData.goodsList.map((obj:any) => obj.data.skuId) : [],
                normalIds: state.voucherData.normalIds,
                shopCategoryIds:state.voucherData.shopCategoryIds,
                storeCategoryIds:state.voucherData.storeCategoryIds,
                couponProductIsUse: state.voucherData.couponProductIsUse,
                couponIsForever: state.voucherData.couponIsForever, // 领取时间限制
                couponReceiveStartTime: state.voucherData.couponIsForever == 1 ? state.voucherData.couponIsForeverTimeDate[0] : '',
                couponReceiveEndTime: state.voucherData.couponIsForever == 1 ? state.voucherData.couponIsForeverTimeDate[1] : '',
                couponIsFixedTime: state.voucherData.couponIsFixedTime, // 是否固定使用时间
                couponUseDay:Number(state.voucherData.couponUseDay), // 固定可使用天数
                couponUseStartTime: state.voucherData.couponIsFixedTime == 1 ? state.voucherData.couponIsFixedTimeDate[0] : '',
                couponUseEndTime: state.voucherData.couponIsFixedTime == 1 ? state.voucherData.couponIsFixedTimeDate[1] : '',
                couponLimitType: state.voucherData.couponLimitType, // 优惠使用限制
                couponIsLimited: state.voucherData.couponIsLimited, // 优惠券是否限量发放
                couponTotal: state.voucherData.couponIsLimited == 0 ? 0 : state.voucherData.couponTotal, // 优惠券发放数量
                couponDesc: state.voucherData.couponDesc, // 使用规则
                couponStatus: Number(state.voucherData.couponStatus), // 状态 0 关闭 1 开启
            }
            const { method } = await couponAdd(params);
            if(method == 'success'){
                ElMessage.success('提交成功');
                router.go(-1)
            }
		} else {
			console.log('error submit!', fields)
		}
	})
}

</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
}
.el-form{
    flex:1;
    overflow-y: auto;
    position: relative;
}
.form-ele-size {
    width: 260px;
}

.line-title {
    font-size: 18px;
    padding: 8px 12px;
    background-color: #eceef0;
    border-radius: 6px;
    margin-bottom: 15px;
}

.selector-img {
    // width: 64px;
    // height: 64px;
    // border: 1px solid #ededed;
    // border-radius: 5px;
    // position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // &:hover {
    //     background-color: #f5f5f5;
    //     border: 1px solid #e4e3e3;
    // }
}
.typeBox{
    height: 65px;
    margin-right: 15px;
    border: 1px solid var(--el-border-color-light, #ebeef5);
    line-height: 24px;
    box-sizing: border-box;
    cursor: pointer;
    span:first-child{
        font-weight: 600;
    }
    span:last-child{
        font-weight: 500;
        color: var(--el-color-info-light-3);
    }
}
.typeBoxSelected {
    border: 1px solid var(--el-color-primary);
    position: relative;
    .virtual_san{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 26px solid var(--el-color-primary);
        border-left: 26px solid transparent;
    }
    .virtual_dui{
        position: absolute;
        bottom: -2px;
        right: 2px;
        color: #fff;
        font-family: system-ui;
    }
}
</style>
